<template>
  <PageHeader name="标点管理"></PageHeader>
  <div class="container-box">
    <!-- 搜索区域 -->
    <el-row justify="end">
      <el-col :span="3">
        <el-input v-model="searchQuery" placeholder="搜索标点名称" @input="handleSearch" />
      </el-col>
      <el-col :span="18"> </el-col>
      <el-col :span="3">
        <el-button type="warning" @click="handleAdd">新增</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :default-sort="{ prop: 'date', order: 'descending' }" :data="filterTableData" border max-height="700"
          style="width: 100%">
          <el-table-column label="标点名称" prop="name" width="280" />
          <el-table-column label="标点类型" prop="type" width="180" />
          <el-table-column label="标点分类" prop="categories" />
          <el-table-column label="更新时间" prop="date" sortable />
          <el-table-column fixed="right" label="操作" min-width="120" width="180">
            <template #default="scope">
              <el-button type="primary" size="small" @click="handleEdit(scope.row)" :icon="Edit" circle />
              <el-button type="danger" :icon="Delete" circle size="small" />
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <br>
        <el-pagination v-model:currentPage="currentPage" :hide-on-single-page="tableData.length"
          :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-col>
    </el-row>
  </div>

  <!-- 新增/编辑对话框 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form :model="form" label-width="80px">
      <el-form-item label="线路名称">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="线路类型">
        <el-input v-model="form.type" />
      </el-form-item>
      <el-form-item label="所属地区">
        <el-input v-model="form.area" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary">保存</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import PageHeader from '@/components/layout/PageHeader.vue'
import { Delete, Edit } from '@element-plus/icons-vue'
import { getMapPointsList } from '@/js/api'
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const tableData = ref<any[]>([])
onMounted(() => {
  init()
})
async function initMapPointsList(mapId: string) {
  const res = await getMapPointsList(mapId)
  tableData.value = res.data
  console.log("🚀 ~ initMapPointsList ~ tableData:", tableData)

}
async function init() {
  await initMapPointsList((route.params.id ??= '') !== '' ? (route.params.id + '') : 'ys')
}
//搜索
const searchQuery = ref('')
//分页
const currentPage = ref(1)
const pageSize = ref(10)
//dialog
const dialogVisible = ref(false)
const dialogTitle = ref('')
const form = ref({ name: '', type: '', area: '', date: '' })
const editIndex = ref(-1)
const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize
}
const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage
}
const filterTableData = computed(() =>
  tableData.value.filter(
    (data) =>
      !searchQuery.value || data.name.toLowerCase().includes(searchQuery.value.toLowerCase()),
  ),
)

const handleSearch = () => {
  currentPage.value = 1 // 搜索时重置分页
}

const handleAdd = () => {
  dialogTitle.value = '新增'
  form.value = { name: '', type: '', area: '', date: '' }
  editIndex.value = -1
  dialogVisible.value = true
}
const handleEdit = (row: TableItem) => {
  dialogVisible.value = true
  form.value = { ...row }
  editIndex.value = tableData.value.indexOf(row)
  dialogVisible.value = true
}
interface TableItem {
  name: string
  area: string
  type: string
  date: string
}

</script>

<style scoped>
.container-box {
  padding: 0px 20px 20px 20px;
}

.el-row {
  margin-bottom: 20px;
}
</style>
